<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间:{{ photoinfo.add_time | dateFormat }}</span>
            <span>点击:{{ photoinfo.click }}次</span>
        </p>

        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
    <vue-preview  class="imgPrev" :slides="list" @close="handleClose"></vue-preview>
        </div>
        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content">

        </div>

        <!-- 放置一个现成的 评论子组件 -->
    <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
//1.导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
    id:this.$route.params.id, //从路由中获取到的图片ID
    photoinfo:[], //图片详情
    list:[] //缩略图的数组
        }
    },
    created() {
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods: {
    getPhotoInfo(){
        //获取图片的详情 ajax
       this.$http.get('api/getimageInfo/'+this.id).then(result=>{
           if (result.body.status===0) {
               this.photoinfo=result.body.message[0];
           }
       })
    },
    getThumbs(){
        //获取缩略图
       this.$http.get('api/getthumimages/'+this.id).then(result=>{
           if (result.body.status===0) {
               //循环每个图片数据,补全图片的宽和高
               result.body.message.forEach(item=>{
                   item.w=600;
                   item.h=400;
                   item.src=item.src;
                   item.msrc=item.src;
               });
               //把完整的数据保存到list中
               this.list=result.body.message
           }
       })
    },
           handleClose(){
               console.log('close event')
           }
    },
    components:{
        //注册评论子组件
        'cmt-box':comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
     padding: 0.1875rem;
     h3{
         color: #26a2ff;
         font-size: 0.9375rem;
         text-align: center;
         margin: 0.9375rem 0;
    }
     .subtitle{
         display: flex;
         justify-content: space-between;
         font-size: 0.8125rem;
    }
     .content{
         font-size: 0.8125rem;
         line-height: 1.875rem;
    }
    .thumbs {
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    figure {
      width: 30%;
      margin: 5px;
      img {
        box-shadow:4px 4px 10px #000000; 
        width: 100%;
      }
    }
  }
}
}
</style>
